<template>
  <div class="lyric" ref="lyric">
    <i class="iconfont icon-prev" @click="turn"></i>
    <div class="music-part">
      <div class="_left">
        <div class="imgout">
          <!-- <img :src="Musicdetail.al.picUrl" class="playImg"> -->
          <img :src="Musicdetail.al.picUrl" ref="playImg" class="playImg" v-if="Musicdetail">
        </div>
      </div>
      <div class="_center">
        <div style="display:flex;justify-content:center">
          <span style="align-self:center;font-size:27px;margin-bottom:10px" v-if="Musicdetail">{{Musicdetail.name}}</span>
        </div>
        <div style="display:flex;justify-content:center;margin-bottom:50px">
          <span style="color:rgb(136,134,135);font-size:14px">
            <span style="cursor:pointer" v-if="Musicdetail">{{conName(Musicdetail.ar)}}</span> - 
            <span style="cursor:pointer" @click="ToAlbum" v-if="Musicdetail">{{Musicdetail.al.name}}</span>
          </span>
        </div>
        <lyric :Lyric='lyric'></lyric>
      </div>
      <div class="_right">
        <comment :type="0" :id="musicId" class="comment" @pageChange="turn"></comment>
      </div>
    </div>
  </div>
</template>

<script>
import {request} from 'network/request'
import {mapGetters} from 'vuex'
import lyric from 'components/content/lyric.vue'
import Comment from '../playlistdetail/childComps/Comment.vue'
export default {
  name:'musicLyric',
  data(){
    return{
      lyric:null,
      timer:null,
      deg:0
    }
  },
  components:{
    lyric,
    Comment
  },
  methods:{
    turn(){
      this.$parent.$refs.lefts.style.bottom = (this.$parent.$refs.lefts.style.bottom === '0px') ? '-70px' : '0px'
      this.$refs.lyric.style.top = '800px'
      setTimeout(() => {
        this.$refs.lyric.style.display = 'none'
      }, 500);
    },
    async getLyric(){
      const data = await request('GET','lyric',{id:this.musicId})
      this.lyric = null
      this.lyric = data.lrc.lyric
    },
    conName(ar){
      let arr=[]
      for(let item in ar ){
        arr.push(ar[item].name)
      }
      return arr.join('/')
    },
    ImgRotate(){
      cancelAnimationFrame(this.timer)
      if(this.isplay === true){
        // this.$nextTick(()=>{
          const playImg = this.$refs.playImg
          let _this = this
          function render(){
            playImg.style.transform = `rotateZ(${this.deg+=.3}deg)`
            this.timer = window.requestAnimationFrame(render.bind(_this))
          }
          render.bind(this)()
        // })
      }
    },
    ToAlbum(){
      // this.$router.push('/playlistdetail/'+this.Musicdetail.al.id+'/'+1)
      // this.turn()
    }
  },
  computed:{
    // ...mapGetters({
    //   musicId:'getCurrentMusicId',
    //   Musicdetail:'getCurrentMusicDetail',
    // }),
    musicId(){
      return this.$store.state.currentMusicId
    },
    Musicdetail(){
      return this.$store.getters.getCurrentMusicDetail
    },
    isplay(){
      return this.$store.state.isPlay
    },
    
  },
  mounted(){
    if(this.MusicId){
      this.getLyric()
    }
    // const data = await request("GET",'song/detail',{ids:this.musicId})
    // console.log(data)
  },
  watch:{
    musicId:{
      handler(){
        this.getLyric()
        // const playImg = document.getElementsByClassName('playImg')[0];
        this.ImgRotate()
      },  
    },
    isplay:{
      handler(){
        this.ImgRotate()
      }, 
      immediate:false
    }
  }
} 
</script>

<style scoped>
.lyric{
  display: none;
  height:calc(100% - 70px);
  width: 100vw;
  /* background-color: rgb(140, 58, 58); */
  background: linear-gradient(rgb(208,209,213), #fff);
  position:absolute;
  top:0;
  z-index: 1001;
  transition:top .3s ease-out
}
.icon-prev:before{
  display: inline-block;
  cursor: pointer;
  margin: 27px;
  font-size: 18px;
  transform: rotateZ(90deg);
}
.music-part{
  margin-top: 20px;
  width:100%;
  /* height:400px; */
  display: flex;
  /* justify-content: center; */
}
._left{
  flex:1;
  display: flex;
  justify-content: center;
  /* align-items: center; */
  margin-top: 100px;
  /* position: relative; */
}
.imgout{
  border-radius:50%;
  background: linear-gradient(rgb(203,203,206), rgb(225,225,225));
  /* overflow: hidden; */
  width: 320px;
  height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 100px;
}
.playImg{
  border: 40px solid #000;
  width: 210px;
  height: 210px;
  border-radius: 50%;
  /* transform: rotateZ(90deg); */
  /* transition: all .5s linear; */
}
._center{
  flex:1;
  height:400px;
}
._right{
  flex:1;
  height:650px;
  overflow-y: scroll;
  
  /* box-sizing: border-box; */
}
.comment{
  margin: 0 50px 0 20px;
}
._right::-webkit-scrollbar {
  display: none;
}
</style>